<template>
  <div class="app-container">
    <el-collapse ref="collapse" v-model="activeNames" v-loading="loading">
      <el-collapse-item title="基本信息" name="1">
        <el-form :model="viewData" label-width="100px">
          <el-form-item label="运输任务编号:" style="padding-right: 35px">
            <el-input :value="viewData.id" disabled />
          </el-form-item>
          <el-form-item
            label="车牌号码:"
            label-width="80px"
            style="padding-left: 50px"
          >
            <el-input :value="viewData.truck?.licensePlate" disabled />
          </el-form-item>
          <el-form-item
            label="调度机构:"
            label-width="70px"
            style="padding-right: 35px"
          >
            <el-input :value="viewData.startAgency?.name" disabled />
          </el-form-item>
          <el-form-item
            label="起始地:"
            label-width="60px"
            style="padding-right: 28px"
          >
            <el-input :value="viewData.startAgency?.name" disabled />
          </el-form-item>
          <el-form-item label="目的地:" style="padding-right: 35px">
            <el-input :value="viewData.endAgency?.name" disabled />
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="任务轨迹" name="2">
        <el-form :model="viewData" label-width="104px" class="taskTracks">
          <el-form-item label="车牌号:" style="padding-right: 35px">
            <el-input :value="viewData.truck?.licensePlate" disabled />
          </el-form-item>
          <el-form-item label="司机:" style="padding-right: 28px">
            <el-input
              :value="
                drivers[0]?.name
                  ? drivers[0]?.name
                  : '' + ',' + drivers[1]?.name
                  ? drivers[1]?.name
                  : ''
              "
              disabled
            />
          </el-form-item>
          <el-form-item label="计划发车时间:" style="padding-right: 35px">
            <el-input :value="viewData.planDepartureTime" disabled />
          </el-form-item>
          <el-form-item
            label="实际发车时间:"
            style="padding-right: 28px; margin-top: 18px"
          >
            <el-input
              :placeholder="
                viewData.actualDepartureTime === null
                  ? '暂未发车'
                  : viewData.actualDepartureTime
              "
              disabled
            />
          </el-form-item>
          <el-form-item label="计划到达时间:" style="padding-right: 35px">
            <el-input :value="viewData.planArrivalTime" disabled />
          </el-form-item>
          <el-form-item label="实际到达时间:" style="padding-right: 28px">
            <el-input
              :placeholder="
                viewData.actualArrivalTime === null
                  ? '暂未到达'
                  : viewData.actualArrivalTime
              "
              disabled
            />
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="货品信息" name="3" class="Goods">
        <el-table
          :data="transportOrders"
          style="width: 100%"
          :header-cell-style="{ background: '#f8faff' }"
        >
          <el-table-column label="序号" type="index" width="100" />
          <el-table-column label="运单编号" prop="id" width="199" />
          <el-table-column
            label="下单时间"
            prop="order.createTime"
            width="227"
          />
          <el-table-column
            label="发件人姓名"
            prop="order.senderName"
            width="194"
          />
          <el-table-column
            label="发件人电话"
            prop="order.senderPhone"
            width="194"
          />
          <el-table-column
            label="发件人地址"
            prop="order.senderAddress"
            width="194"
          />
          <el-table-column label="货品数量" width="129" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                type="text"
                style="color: #419eff"
                @click="fnJump(row)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-collapse-item>
      <el-collapse-item title="交付照片" name="4" class="srcList">
        <div class="srcList-src">
          <div class="one">货品照片</div>
          <div class="src">
            <img
              :src="
                viewData.deliverPicture === null ? url : viewData.deliverPicture
              "
              alt=""
            >
            <div class="img-shadow">
              <i
                class="el-icon-zoom-in"
                style=""
                @click="
                  magnify(
                    viewData.deliverPicture === null
                      ? url
                      : viewData.deliverPicture
                  )
                "
              />
            </div>
          </div>

          <div class="two">凭证照片</div>
          <div class="src">
            <img
              :src="
                viewData.cargoPickUpPicture === null
                  ? url
                  : viewData.cargoPickUpPicture
              "
              alt=""
            >
            <div class="img-shadow">
              <i
                class="el-icon-zoom-in"
                style=""
                @click="
                  magnify(
                    viewData.cargoPickUpPicture === null
                      ? url
                      : viewData.cargoPickUpPicture
                  )
                "
              />
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="提货照片" name="5" class="srcList">
        <div class="srcList-src">
          <div class="one">货品照片</div>
          <div class="src">
            <img
              :src="
                viewData.cargoPicture === null ? url : viewData.cargoPicture
              "
              alt=""
            >
            <div class="img-shadow">
              <i
                class="el-icon-zoom-in"
                style=""
                @click="
                  magnify(
                    viewData.cargoPicture === null ? url : viewData.cargoPicture
                  )
                "
              />
            </div>
          </div>

          <div class="two">凭证照片</div>
          <div class="src">
            <img
              :src="
                viewData.cargoPickUpPicture === null
                  ? url
                  : viewData.cargoPickUpPicture
              "
              alt=""
            >
            <div class="img-shadow">
              <i
                class="el-icon-zoom-in"
                style=""
                @click="
                  magnify(
                    viewData.cargoPickUpPicture === null
                      ? url
                      : viewData.cargoPickUpPicture
                  )
                "
              />
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-dialog :visible.sync="dialogVisible" width="600px">
        <img :src="magnifyPic" alt="">
      </el-dialog>
    </el-collapse>
    <Footer />
  </div>
</template>
<script>
import { getSender } from '@/api/transport'
export default {
  data() {
    return {
      activeNames: ['1', '2', '3', '4', '5'],
      viewData: {},
      drivers: [],
      transportOrders: [],
      loading: false,
      dialogVisible: false,
      magnifyPic: '',
      // 控制图片
      url: 'https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/282b9ee4-9edc-40e9-b365-84dec2cce429.png'
    }
  },
  created() {
    this.loading = true
    this.getInformation()
  },
  methods: {
    async getInformation() {
      const res = await getSender(this.$route.query.id)
      this.viewData = res
      this.drivers = res.drivers
      this.transportOrders = res.transportOrders
      this.loading = false
    },
    magnify(pic) {
      this.magnifyPic = pic
      this.dialogVisible = true
    },
    fnJump(row) {
      this.$router.push({
        path: '/business/waybill-detail',
        query: {
          id: row.id,
          orderId: row.orderId,
          type: '运输管理'
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-collapse {
  border: 0;
}
.el-collapse-item {
  margin-bottom: 20px;
  &:nth-child(5) {
    margin-bottom: 0;
  }
  :deep(.el-collapse-item__header) {
    height: 60px;
    background-color: #f8faff;
    padding: 20px 20px 20px 44px;
    font-weight: 700;
    font-size: 16px;
    pointer-events: none;
    cursor: default;
    .el-collapse-item__arrow {
      margin-right: 25px;
      cursor: pointer;
      pointer-events: auto;
    }
  }
  :deep(.el-collapse-item__content) {
    padding: 36px 0 30px 45px;
    width: 100%;
    .el-form {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-form-item {
        height: 20px;
        line-height: 20px;
        margin: 0;
        &:nth-child(n + 5) {
          margin-top: 18px;
        }
        .el-form-item__label {
          height: 20px;
          line-height: 20px;
          font-weight: 400;
          font-size: 14px;
          padding: 0;
          text-align: left;
        }
        .el-form-item__content {
          height: 20px;
          line-height: 20px;
        }
        .el-input__inner {
          height: 20px;
          width: 214px;
          line-height: 20px;
          background-color: #fff;
          padding: 0;
          border: none;
          color: #818693;
        }
      }
    }
  }
}
:deep(.Goods) {
  .el-collapse-item__content {
    padding: 30px 40px;
    .el-table {
      border: 1px solid #ebeef5;
      color: #20232a;
      .el-table__cell {
        &:first-child {
          .cell {
            padding-left: 20px;
          }
        }
      }
    }
  }
}

:deep(.srcList) {
  .el-collapse-item__content {
    padding: 40px 26px;
    line-height: 1;
    .srcList-src {
      .one {
        display: inline-block;
        margin-left: 70px;
        margin-right: 20px;
        vertical-align: top;
        font-size: 16px;
        color: rgb(42, 41, 41);
      }
      .src {
        width: 212px;
        height: 159px;
        display: inline-block;
        vertical-align: top;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        .img-shadow {
          position: absolute;
          opacity: 0;
          top: 0;
          width: 212px;
          height: 159px;
          color: #fff;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          text-align: center;
          .el-icon-zoom-in {
            width: 28px;
            height: 28px;
            margin-top: 64px;
            cursor: pointer;
            font-size: 28px;
          }
          &:hover {
            opacity: 1;
          }
        }
      }
      .two {
        vertical-align: top;
        font-size: 16px;
        color: rgb(42, 41, 41);
        margin-right: 20px;
        display: inline-block;
        margin-left: 20%;
      }
    }
  }
}
:deep(.el-dialog__header) {
  height: 0;
  padding: 0;
}
:deep(.el-dialog__body) {
  height: 600px;
  padding: 0;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
